<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽签助手 - UI原型图</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
        }

        /* 页面容器 */
        .pages-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            padding: 24px;
            background: #1a1a1a;
            min-height: 100vh;
        }

        .page-frame {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 9/16;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 手机页面样式 */
        .phone-page {
            width: 100%;
            height: 100%;
            background: #f7f8fa;
            position: relative;
        }

        /* 状态栏 */
        .status-bar {
            height: 44px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            font-size: 14px;
            color: #323233;
            border-bottom: 1px solid #ebedf0;
        }

        /* 页面内容样式 */
        .page-content {
            padding: 20px 0; /* 移除左右padding，由内容自己控制 */
            height: calc(100% - 44px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }

        /* 首页样式 */
        .container {
            padding: 20px;
        }

        .header {
            text-align: center;
            padding: 24px 0;
        }

        .title {
            font-size: 36rpx;
            color: #323233;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .subtitle {
            font-size: 28rpx;
            color: #969799;
        }

        .features {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 32px;
        }

        .feature-card {
            background: #ffffff;
            border-radius: 12rpx;
            padding: 20px;
            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .feature-card:active {
            transform: scale(0.98);
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            margin-right: 16px;
            background: #07c160;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-icon img {
            width: 24px;
            height: 24px;
        }

        .feature-content {
            flex: 1;
        }

        .feature-title {
            font-size: 16px;
            color: #323233;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .feature-desc {
            font-size: 14px;
            color: #969799;
        }

        /* 提交按钮固定在底部 */
        .submit-btn {
            position: fixed;
            bottom: 66px; /* 距离底部导航栏16px */
            left: 20px;
            right: 20px;
            height: 44px;
            background: #07c160;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99; /* 确保按钮显示在所有内容之上 */
        }

        /* 为底部按钮预留空间 */
        .form-group:last-child {
            margin-bottom: 60px; /* 调整为更合适的底部空间 */
        }

        /* 底部导航固定定位 - 已隐藏 */
        .nav-bar {
            display: none;
        }

        .nav-item {
            display: none;
        }

        .nav-icon {
            display: none;
        }

        .nav-text {
            display: none;
        }

        .nav-item.active .nav-text {
            display: none;
        }

        /* 幸运抽签配置页样式 */
        .form-group {
            background: #ffffff;
            border-radius: 8px;
            padding: 16px;
            margin: 0 20px 16px 20px; /* 统一使用20px的左右边距 */
        }

        .form-item {
            margin-bottom: 16px;
        }

        .form-label {
            font-size: 14px;
            color: #323233;
            margin-bottom: 8px;
            display: block;
        }

        .form-input {
            width: 100%;
            height: 44px;
            border: 1px solid #ebedf0;
            border-radius: 4px;
            padding: 0 12px;
            font-size: 14px;
        }

        .form-switch {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .switch {
            width: 51px;
            height: 31px;
            background: #07c160;
            border-radius: 31px;
            position: relative;
            cursor: pointer;
        }

        .switch::after {
            content: '';
            position: absolute;
            width: 27px;
            height: 27px;
            background: white;
            border-radius: 50%;
            top: 2px;
            right: 2px;
            transition: all 0.3s;
        }

        /* 参与抽签页面样式 */
        .join-header {
            background: linear-gradient(135deg, #07c160, #10ad7a);
            padding: 24px;
            border-radius: 16px;
            margin: 0 20px 20px 20px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(7, 193, 96, 0.15);
            color: white;
        }

        .join-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .join-desc {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .progress-info {
            display: flex;
            justify-content: space-around;
            padding: 16px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .progress-item {
            text-align: center;
            position: relative;
        }
        
        .progress-item:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -25%;
            top: 20%;
            width: 1px;
            height: 60%;
            background: rgba(255, 255, 255, 0.2);
        }

        .progress-value {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .progress-label {
            font-size: 12px;
            opacity: 0.8;
        }

        .participants {
            background: #ffffff;
            border-radius: 16px;
            padding: 20px;
            margin: 0 20px 20px 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .section-title {
            font-size: 18px;
            color: #323233;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
        }

        .participant-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .participant-item {
            text-align: center;
            animation: fadeIn 0.5s ease-out;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #f7f8fa;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid #ebedf0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .participant-item:hover .avatar {
            transform: scale(1.05);
            border-color: #07c160;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .participant-name {
            font-size: 14px;
            color: #323233;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 4px;
        }

        .join-btn {
            height: 44px;
            position: absolute;
            bottom: 66px;
            left: 16px;
            right: 16px;
            background: #07c160;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .join-btn:active {
            opacity: 0.9;
        }

        .join-btn:disabled {
            background: #969799;
            cursor: not-allowed;
        }

        /* 抽签结果页面容器 */
        .result-container {
            display: flex;
            flex-direction: column;
            padding: 20px;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .result-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .result-title {
            font-size: 20px;
            color: #323233;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .result-subtitle {
            font-size: 14px;
            color: #969799;
        }

        /* 中签名单区域 */
        .result-list {
            background: #ffffff;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 24px;
        }

        .result-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .result-list-title {
            font-size: 16px;
            color: #323233;
            font-weight: 500;
        }

        .winner-count {
            font-size: 14px;
            color: #07c160;
        }

        .winner-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 0 12px;
        }

        .winner-item {
            text-align: center;
        }

        .winner-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin: 0 auto 8px;
            background: #f7f8fa;
            overflow: hidden;
            position: relative;
        }

        .winner-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .winner-name {
            font-size: 14px;
            color: #323233;
            margin-bottom: 4px;
        }

        .winner-tag {
            display: inline-block;
            padding: 2px 8px;
            background: #f0f9eb;
            color: #07c160;
            border-radius: 2px;
            font-size: 12px;
        }

        /* 操作按钮容器 */
        .action-buttons {
            width: calc(100% - 40px);
            margin: 16px 20px 70px 20px;
            display: flex;
            gap: 12px;
        }

        .action-btn {
            flex: 1;
            height: 44px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .secondary-btn {
            background: #f7f8fa;
            color: #323233;
            border: 1px solid #ebedf0;
        }

        .primary-btn {
            background: #07c160;
            color: white;
        }

        /* 幸运转盘配置页样式 */
        .wheel-preview {
            background: #ffffff;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
        }

        .preview-title {
            font-size: 16px;
            color: #323233;
            margin-bottom: 16px;
        }

        .wheel-container {
            width: 100%;
            padding-bottom: 100%;
            position: relative;
        }

        .wheel-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .option-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .option-item {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .option-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .color-picker {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            border: 1px solid #ebedf0;
            cursor: pointer;
        }

        .delete-btn {
            padding: 4px 8px;
            border: 1px solid #ee0a24;
            border-radius: 4px;
            color: #ee0a24;
            background: transparent;
            font-size: 12px;
            cursor: pointer;
        }

        .add-option-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 44px;
            background: #f7f8fa;
            border: 1px dashed #dcdee0;
            border-radius: 4px;
            color: #969799;
            font-size: 14px;
            cursor: pointer;
        }

        .add-icon {
            font-size: 20px;
            font-weight: 300;
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .slider {
            flex: 1;
            height: 2px;
            background: #ebedf0;
            border-radius: 1px;
            appearance: none;
        }

        .slider::-webkit-slider-thumb {
            appearance: none;
            width: 20px;
            height: 20px;
            background: #07c160;
            border-radius: 50%;
            cursor: pointer;
        }

        .slider-value {
            font-size: 14px;
            color: #969799;
            min-width: 40px;
        }

        /* 幸运转盘抽奖页样式 */
        .wheel-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .wheel-title {
            font-size: 24px;
            color: #323233;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .wheel-subtitle {
            font-size: 14px;
            color: #969799;
        }

        .wheel-area {
            padding: 20px;
            background: #ffffff;
            border-radius: 8px;
            margin-bottom: 24px;
        }

        .wheel-wrapper {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
        }

        .wheel-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            animation: none;
            transform-origin: center;
        }

        .wheel-bg.spinning {
            animation: spin 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(1440deg); }
        }

        .wheel-text {
            font-size: 12px;
            fill: #ffffff;
            text-anchor: middle;
        }

        .wheel-pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .wheel-actions {
            text-align: center;
            margin-bottom: 24px;
        }

        .start-btn {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #07c160;
            color: white;
            border: none;
            font-size: 18px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
            transition: all 0.3s ease;
        }

        .start-btn:active {
            transform: scale(0.95);
            box-shadow: 0 2px 6px rgba(7, 193, 96, 0.2);
        }

        .action-tips {
            margin-top: 12px;
            font-size: 14px;
            color: #969799;
        }

        .history-section {
            background: #ffffff;
            border-radius: 8px;
            padding: 16px;
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            background: #f7f8fa;
            border-radius: 4px;
        }

        .history-content {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .history-text {
            font-size: 14px;
            color: #323233;
        }

        .history-time {
            font-size: 12px;
            color: #969799;
        }

        .history-tag {
            padding: 2px 6px;
            background: #07c160;
            color: white;
            border-radius: 4px;
            font-size: 12px;
        }

        .clear-history {
            font-size: 14px;
            color: #969799;
            cursor: pointer;
        }

        /* 我的页面样式 */
        .user-card {
            background: #ffffff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 16px;
        }

        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .user-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 16px;
            background: #f7f8fa;
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-detail {
            flex: 1;
        }

        .user-name {
            font-size: 18px;
            color: #323233;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .user-id {
            font-size: 14px;
            color: #969799;
        }

        .edit-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            padding: 6px;
            cursor: pointer;
        }

        .user-stats {
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #ebedf0;
            padding-top: 20px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-size: 20px;
            color: #323233;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 12px;
            color: #969799;
        }

        .function-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .function-group {
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
        }

        .function-item {
            display: flex;
            align-items: center;
            padding: 16px;
            position: relative;
        }

        .function-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 0;
            height: 1px;
            background: #ebedf0;
        }

        .function-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

        .function-content {
            flex: 1;
        }

        .function-title {
            font-size: 16px;
            color: #323233;
            margin-bottom: 4px;
        }

        .function-desc {
            font-size: 12px;
            color: #969799;
        }

        .function-arrow {
            width: 16px;
            height: 16px;
            border-top: 2px solid #969799;
            border-right: 2px solid #969799;
            transform: rotate(45deg);
            margin-left: 8px;
        }

        /* 抽签配置页的内容容器 */
        .lucky-draw-config {
            display: flex;
            flex-direction: column;
        }

        .lucky-draw-config .submit-btn {
            position: static;
            margin-top: 16px;
            margin-bottom: 70px;
            width: 100%;
        }

        /* 转盘配置页的内容容器 */
        .wheel-config {
            display: flex;
            flex-direction: column;
        }

        .wheel-config .submit-btn {
            position: relative;
            margin-top: 24px;
            margin-bottom: 20px;
            width: calc(100% - 40px);
            margin-left: 20px;
            margin-right: 20px;
        }
        
        /* 统一的底部按钮基础样式 */
        .bottom-btn {
            height: 44px;
            background: linear-gradient(to right, #07c160, #10ad7a);
            color: white;
            border: none;
            border-radius: 22px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 16px 20px 70px 20px;
            box-shadow: 0 4px 8px rgba(7, 193, 96, 0.2);
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }

        .bottom-btn:active {
            opacity: 0.9;
            transform: scale(0.98);
            box-shadow: 0 2px 4px rgba(7, 193, 96, 0.15);
        }

        .bottom-btn:disabled {
            background: #969799;
            cursor: not-allowed;
            box-shadow: none;
        }

        /* 参与抽签按钮样式 */
        .join-btn {
            height: 44px;
            position: absolute;
            bottom: 66px;
            left: 16px;
            right: 16px;
            background: #07c160;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .join-btn:active {
            opacity: 0.9;
        }

        .join-btn:disabled {
            background: #969799;
            cursor: not-allowed;
        }

        /* 创建抽签和保存配置按钮样式 */
        .lucky-draw-config .bottom-btn,
        .wheel-config .bottom-btn {
            height: 44px;
            margin-top: 30px;
        }

        /* 页面内容容器样式 */
        .lucky-draw-config,
        .wheel-config {
            display: flex;
            flex-direction: column;
            min-height: calc(100% - 50px); /* 减去底部导航栏的高度 */
        }

        /* 表单组样式 */
        .form-group:last-of-type {
            margin-bottom: 0;
        }

        /* 动画区域样式 */
        .animation-area {
            width: 100%;
            height: 120px;
            background: #ffffff;
            border-radius: 8px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .animation-text {
            font-size: 24px;
            color: #07c160;
            font-weight: bold;
            opacity: 0;
            animation: fadeInOut 2s ease-in-out infinite;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; transform: scale(0.9); }
            50% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.9); }
        }

        /* 参与按钮样式 - 特殊样式 */
        .join-page .bottom-btn {
            background: linear-gradient(135deg, #ff976a, #f85e3f);
            margin-bottom: 80px;
            animation: pulse 2s infinite;
            box-shadow: 0 6px 16px rgba(255, 151, 106, 0.3);
        }
        
        .join-page .bottom-btn:active {
            transform: scale(0.96);
            box-shadow: 0 3px 8px rgba(255, 151, 106, 0.2);
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 6px 16px rgba(255, 151, 106, 0.3); }
            50% { box-shadow: 0 6px 20px rgba(255, 151, 106, 0.5); }
            100% { box-shadow: 0 6px 16px rgba(255, 151, 106, 0.3); }
        }

        .avatar-num {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 20px;
            height: 20px;
            background: #07c160;
            color: white;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .participant-status {
            font-size: 12px;
            color: #07c160;
            margin-top: 2px;
            background: rgba(7, 193, 96, 0.1);
            border-radius: 10px;
            padding: 2px 6px;
            display: inline-block;
        }

        .loading-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #f7f8fa;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid #ebedf0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .participant-item.loading .loading-avatar {
            transform: scale(1.05);
            border-color: #07c160;
        }

        .loading-spinner {
            width: 24px;
            height: 24px;
            border: 4px solid rgba(7, 193, 96, 0.3);
            border-top: 4px solid #07c160;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .add-avatar {
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(7, 193, 96, 0.1);
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px dashed #07c160;
            box-shadow: 0 2px 8px rgba(7, 193, 96, 0.2);
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0.4); }
            70% { box-shadow: 0 0 0 6px rgba(7, 193, 96, 0); }
            100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, 0); }
        }
        
        .add-icon {
            font-size: 24px;
            font-weight: bold;
            color: #07c160;
        }
        
        .add-item .participant-name {
            color: #07c160;
            font-weight: 500;
        }

        .add-item {
            cursor: pointer;
            animation: fadeIn 0.5s ease-out;
            transition: all 0.3s ease;
        }
        
        .add-item:active {
            transform: scale(0.95);
        }

        /* 底部占位，确保内容不被遮挡 */
        .bottom-placeholder {
            display: none;
            height: 0;
            width: 0;
        }

        /* 表单组样式 */
        .form-group:last-of-type {
            margin-bottom: 30px;
        }

        /* 底部占位区域 - 已不需要 */
        .bottom-placeholder {
            display: none;
        }

        /* 表单组样式 */
        .form-group:last-of-type {
            margin-bottom: 20px;
        }

        /* 页面内容容器样式 */
        .lucky-draw-config,
        .wheel-config {
            display: flex;
            flex-direction: column;
            min-height: calc(100% - 10px);
        }

        /* 提交按钮样式调整 */
        .bottom-btn {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 页面展示区域 -->
    <div class="pages-container">
        <!-- 页面1：首页 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>抽签助手</span>
                    <span>...</span>
                </div>
                <div class="container">
                    <!-- 页面标题 -->
                    <div class="header">
                        <h1 class="title">抽签助手</h1>
                        <p class="subtitle">简单便捷的随机选择工具</p>
                    </div>

                    <!-- 功能区域 -->
                    <div class="features">
                        <!-- 幸运抽签 -->
                        <div class="feature-card">
                            <div class="feature-icon">
                                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-5a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E" alt="抽签">
                            </div>
                            <div class="feature-content">
                                <h2 class="feature-title">幸运抽签</h2>
                                <p class="feature-desc">随机抽取指定数量的幸运者</p>
                            </div>
                        </div>

                        <!-- 幸运转盘 -->
                        <div class="feature-card">
                            <div class="feature-icon">
                                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-11h4v2h-4v4h-2v-4H7v-2h4V5h2v4z'/%3E%3C/svg%3E" alt="转盘">
                            </div>
                            <div class="feature-content">
                                <h2 class="feature-title">幸运转盘</h2>
                                <p class="feature-desc">自定义转盘内容，趣味抽选</p>
                            </div>
                        </div>
                    </div>

                    <!-- 底部导航 -->
                    <div class="nav-bar">
                        <div class="nav-item active">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307c160'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                            <span class="nav-text">首页</span>
                        </div>
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                            <span class="nav-text">我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面2：幸运抽签配置 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>幸运抽签</span>
                    <span>...</span>
                </div>
                <div class="page-content lucky-draw-config">
                    <div class="form-group">
                        <div class="form-item">
                            <label class="form-label">活动标题</label>
                            <input type="text" class="form-input" placeholder="请输入抽签活动标题">
                        </div>
                        <div class="form-item">
                            <label class="form-label">参与人数</label>
                            <input type="number" class="form-input" placeholder="请输入总参与人数">
                        </div>
                        <div class="form-item">
                            <label class="form-label">中签人数</label>
                            <input type="number" class="form-input" placeholder="请输入中签人数">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="form-item form-switch">
                            <label class="form-label">自动抽签模式</label>
                            <div class="switch"></div>
                        </div>
                        <div class="form-item form-switch">
                            <label class="form-label">开启提醒</label>
                            <div class="switch"></div>
                        </div>
                    </div>

                    <button class="bottom-btn">创建抽签</button>

                    <!-- 底部占位区域 -->
                    <div class="bottom-placeholder"></div>

                    <!-- 底部导航 -->
                    <div class="nav-bar">
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                            <span class="nav-text">首页</span>
                        </div>
                        <div class="nav-item active">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307c160'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                            <span class="nav-text">我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面3：参与抽签 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>参与抽签</span>
                    <span>...</span>
                </div>
                <div class="page-content join-page">
                    <!-- 活动信息 -->
                    <div class="join-header">
                        <h2 class="join-title">周末聚会抽签</h2>
                        <p class="join-desc">随机抽取5名幸运者参与周末聚会活动</p>
                        <div class="progress-info">
                            <div class="progress-item">
                                <div class="progress-value">3/10</div>
                                <div class="progress-label">当前参与</div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-value">5</div>
                                <div class="progress-label">中签名额</div>
                            </div>
                            <div class="progress-item">
                                <div class="progress-value">7</div>
                                <div class="progress-label">剩余名额</div>
                            </div>
                        </div>
                    </div>

                    <!-- 参与者列表 -->
                    <div class="participants">
                        <div class="section-title">
                            <span>参与者（3人）</span>
                        </div>
                        <div class="participant-list">
                            <div class="participant-item">
                                <div class="avatar">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="用户1">
                                    <span class="avatar-num">1</span>
                                </div>
                                <div class="participant-name">张三</div>
                                <div class="participant-status">已确认</div>
                            </div>
                            <div class="participant-item">
                                <div class="avatar">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="用户2">
                                    <span class="avatar-num">2</span>
                                </div>
                                <div class="participant-name">李四</div>
                                <div class="participant-status">已确认</div>
                            </div>
                            <div class="participant-item">
                                <div class="avatar">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="用户3">
                                    <span class="avatar-num">3</span>
                                </div>
                                <div class="participant-name">王五</div>
                                <div class="participant-status">已确认</div>
                            </div>
                            <div class="participant-item add-item">
                                <div class="avatar add-avatar">
                                    <span class="add-icon">+</span>
                                </div>
                                <div class="participant-name">加入</div>
                            </div>
                        </div>
                    </div>

                    <!-- 参与按钮 -->
                    <!-- 已移除底部参与抽签按钮 -->

                    <!-- 底部占位区域 -->
                    <div class="bottom-placeholder"></div>

                    <!-- 底部导航 -->
                    <div class="nav-bar">
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                            <span class="nav-text">首页</span>
                        </div>
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                            <span class="nav-text">我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面4：抽签结果 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>抽签结果</span>
                    <span>...</span>
                </div>
                <div class="result-container">
                    <!-- 结果标题 -->
                    <div class="result-header">
                        <h2 class="result-title">周末聚会抽签</h2>
                        <p class="result-subtitle">抽签已完成，恭喜以下幸运者</p>
                    </div>

                    <!-- 动画区域 -->
                    <div class="animation-area">
                        <div class="animation-text">恭喜中签！</div>
                    </div>

                    <!-- 中签结果列表 -->
                    <div class="result-list">
                        <div class="result-list-header">
                            <span class="result-list-title">中签名单</span>
                            <span class="winner-count">5人中签</span>
                        </div>
                        <div class="winner-list">
                            <div class="winner-item">
                                <div class="winner-avatar">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="张三">
                                </div>
                                <div class="winner-name">张三</div>
                                <div class="winner-tag">已中签</div>
                            </div>
                            <div class="winner-item">
                                <div class="winner-avatar">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="李四">
                                </div>
                                <div class="winner-name">李四</div>
                                <div class="winner-tag">已中签</div>
                            </div>
                            <div class="winner-item">
                                <div class="winner-avatar">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="王五">
                                </div>
                                <div class="winner-name">王五</div>
                                <div class="winner-tag">已中签</div>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <button class="action-btn secondary-btn">重新抽签</button>
                        <button class="action-btn primary-btn">分享结果</button>
                    </div>
                </div>

                <!-- 底部占位区域 -->
                <div class="bottom-placeholder"></div>

                <!-- 底部导航 -->
                <div class="nav-bar">
                    <div class="nav-item">
                        <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                        <span class="nav-text">首页</span>
                    </div>
                    <div class="nav-item">
                        <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                        <span class="nav-text">我的</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面5：幸运转盘配置 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>幸运转盘配置</span>
                    <span>...</span>
                </div>
                <div class="page-content wheel-config">
                    <!-- 转盘预览 -->
                    <div class="wheel-preview">
                        <div class="preview-title">转盘预览</div>
                        <div class="wheel-container">
                            <div class="wheel-placeholder">
                                <svg viewBox="0 0 100 100" width="100%" height="100%">
                                    <circle cx="50" cy="50" r="45" fill="#f7f8fa" stroke="#ebedf0" stroke-width="2"/>
                                    <text x="50" y="50" text-anchor="middle" dy=".3em" fill="#969799">转盘预览</text>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- 配置表单 -->
                    <div class="form-group">
                        <div class="form-item">
                            <label class="form-label">转盘标题</label>
                            <input type="text" class="form-input" placeholder="请输入转盘标题">
                        </div>
                        <div class="form-item">
                            <label class="form-label">选项列表</label>
                            <div class="option-list">
                                <div class="option-item">
                                    <input type="text" class="form-input" placeholder="选项1">
                                    <div class="option-actions">
                                        <div class="color-picker" style="background: #07c160;"></div>
                                        <button class="delete-btn">删除</button>
                                    </div>
                                </div>
                                <div class="option-item">
                                    <input type="text" class="form-input" placeholder="选项2">
                                    <div class="option-actions">
                                        <div class="color-picker" style="background: #ff976a;"></div>
                                        <button class="delete-btn">删除</button>
                                    </div>
                                </div>
                                <button class="add-option-btn">
                                    <span class="add-icon">+</span>
                                    <span>添加选项</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 高级设置 -->
                    <div class="form-group">
                        <div class="section-title">高级设置</div>
                        <div class="form-item form-switch">
                            <label class="form-label">转盘音效</label>
                            <div class="switch"></div>
                        </div>
                        <div class="form-item form-switch">
                            <label class="form-label">转动动画</label>
                            <div class="switch"></div>
                        </div>
                        <div class="form-item">
                            <label class="form-label">转动时长</label>
                            <div class="slider-container">
                                <input type="range" min="1" max="10" value="5" class="slider">
                                <span class="slider-value">5秒</span>
                            </div>
                        </div>
                    </div>

                    <button class="bottom-btn">保存配置</button>

                    <!-- 底部占位区域 -->
                    <div class="bottom-placeholder"></div>

                    <!-- 底部导航 -->
                    <div class="nav-bar">
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                            <span class="nav-text">首页</span>
                        </div>
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                            <span class="nav-text">我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面6：幸运转盘抽奖 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>幸运转盘</span>
                    <span>...</span>
                </div>
                <div class="page-content">
                    <!-- 转盘标题 -->
                    <div class="wheel-header">
                        <h2 class="wheel-title">美食转盘</h2>
                        <p class="wheel-subtitle">今天吃什么？让幸运转盘来决定吧！</p>
                    </div>

                    <!-- 转盘区域 -->
                    <div class="wheel-area">
                        <div class="wheel-wrapper">
                            <!-- 转盘背景 -->
                            <div class="wheel-bg">
                                <svg viewBox="0 0 100 100" width="100%" height="100%">
                                    <defs>
                                        <path id="text-path" d="M50 10 A 40 40 0 0 1 50 90 A 40 40 0 0 1 50 10" />
                                    </defs>
                                    <!-- 转盘扇形 -->
                                    <g transform="translate(50,50)">
                                        <path d="M 0 -40 A 40 40 0 0 1 34.64 -20 L 0 0 Z" fill="#07c160" />
                                        <path d="M 34.64 -20 A 40 40 0 0 1 34.64 20 L 0 0 Z" fill="#ff976a" />
                                        <path d="M 34.64 20 A 40 40 0 0 1 0 40 L 0 0 Z" fill="#07c160" />
                                        <path d="M 0 40 A 40 40 0 0 1 -34.64 20 L 0 0 Z" fill="#ff976a" />
                                        <path d="M -34.64 20 A 40 40 0 0 1 -34.64 -20 L 0 0 Z" fill="#07c160" />
                                        <path d="M -34.64 -20 A 40 40 0 0 1 0 -40 L 0 0 Z" fill="#ff976a" />
                                    </g>
                                    <!-- 转盘文字 -->
                                    <g class="wheel-text">
                                        <text>
                                            <textPath href="#text-path">火锅 烤肉 面食 炒菜 快餐 西餐</textPath>
                                        </text>
                                    </g>
                                </svg>
                            </div>
                            <!-- 指针 -->
                            <div class="wheel-pointer">
                                <svg viewBox="0 0 40 40" width="40" height="40">
                                    <path d="M20 0 L40 20 L20 40 L0 20 Z" fill="#323233"/>
                                </svg>
                            </div>
                        </div>
                    </div>

                    <!-- 操作区域 -->
                    <div class="wheel-actions">
                        <button class="start-btn">开始抽奖</button>
                        <div class="action-tips">点击按钮开始转动</div>
                    </div>

                    <!-- 历史记录 -->
                    <div class="history-section">
                        <div class="section-title">
                            <span>历史记录</span>
                            <span class="clear-history">清空</span>
                        </div>
                        <div class="history-list">
                            <div class="history-item">
                                <div class="history-content">
                                    <span class="history-text">火锅</span>
                                    <span class="history-time">12:30</span>
                                </div>
                                <div class="history-tag">最新</div>
                            </div>
                            <div class="history-item">
                                <div class="history-content">
                                    <span class="history-text">烤肉</span>
                                    <span class="history-time">昨天</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 底部占位区域 -->
                    <div class="bottom-placeholder"></div>

                    <!-- 底部导航 -->
                    <div class="nav-bar">
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                            <span class="nav-text">首页</span>
                        </div>
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                            <span class="nav-text">我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页面7：我的 -->
        <div class="page-frame">
            <div class="phone-page">
                <div class="status-bar">
                    <span>15:53</span>
                    <span>我的</span>
                    <span>...</span>
                </div>
                <div class="page-content">
                    <!-- 用户信息卡片 -->
                    <div class="user-card">
                        <div class="user-info">
                            <div class="user-avatar">
                                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E" alt="用户头像">
                            </div>
                            <div class="user-detail">
                                <div class="user-name">微信用户</div>
                                <div class="user-id">ID: 888888</div>
                            </div>
                            <button class="edit-btn">
                                <svg viewBox="0 0 24 24" width="20" height="20" fill="#323233">
                                    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                                </svg>
                            </button>
                        </div>
                        <div class="user-stats">
                            <div class="stat-item">
                                <div class="stat-value">12</div>
                                <div class="stat-label">发起</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">56</div>
                                <div class="stat-label">参与</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-value">8</div>
                                <div class="stat-label">中签</div>
                            </div>
                        </div>
                    </div>

                    <!-- 功能列表 -->
                    <div class="function-list">
                        <div class="function-group">
                            <div class="function-item">
                                <div class="function-icon" style="background: #07c160;">
                                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#fff">
                                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
                                        <path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z"/>
                                    </svg>
                                </div>
                                <div class="function-content">
                                    <div class="function-title">抽签记录</div>
                                    <div class="function-desc">查看历史抽签记录</div>
                                </div>
                                <div class="function-arrow"></div>
                            </div>
                            <div class="function-item">
                                <div class="function-icon" style="background: #ff976a;">
                                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#fff">
                                        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v6h-2V7zm0 8h2v2h-2v-2z"/>
                                    </svg>
                                </div>
                                <div class="function-content">
                                    <div class="function-title">使用帮助</div>
                                    <div class="function-desc">功能介绍和使用说明</div>
                                </div>
                                <div class="function-arrow"></div>
                            </div>
                        </div>

                        <div class="function-group">
                            <div class="function-item">
                                <div class="function-icon" style="background: #969799;">
                                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#fff">
                                        <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
                                    </svg>
                                </div>
                                <div class="function-content">
                                    <div class="function-title">设置</div>
                                    <div class="function-desc">通用设置和隐私选项</div>
                                </div>
                                <div class="function-arrow"></div>
                            </div>
                            <div class="function-item">
                                <div class="function-icon" style="background: #ee0a24;">
                                    <svg viewBox="0 0 24 24" width="24" height="24" fill="#fff">
                                        <path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                                    </svg>
                                </div>
                                <div class="function-content">
                                    <div class="function-title">关于我们</div>
                                    <div class="function-desc">版本信息和联系方式</div>
                                </div>
                                <div class="function-arrow"></div>
                            </div>
                        </div>
                    </div>

                    <!-- 底部占位区域 -->
                    <div class="bottom-placeholder"></div>

                    <!-- 底部导航 -->
                    <div class="nav-bar">
                        <div class="nav-item">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23969799'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                            <span class="nav-text">首页</span>
                        </div>
                        <div class="nav-item active">
                            <img class="nav-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307c160'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E" alt="我的">
                            <span class="nav-text">我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 预留其他页面位置 -->
        <div class="page-frame"></div>
        <div class="page-frame"></div>
        <div class="page-frame"></div>
        <div class="page-frame"></div>
    </div>
</body>
</html>
